<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>请选择</h2>
        <input type="button" id="All" value="全选" />
        <input type="button" id="uncheck" value="不选" />
        <input type="button" id="othercheck" value="反选" />
    </div>
    <div id="content">
        <div>
            <input type="checkbox">
            <span>篮球</span>
        </div>
        <div>
            <input type="checkbox">
            <span>唱歌</span>
        </div>
        <div>
            <input type="checkbox">
            <span>跑步</span>
        </div>
        <div>
            <input type="checkbox">
            <span>乒乓球</span>
        </div>
        <div>
            <input type="checkbox">
            <span>羽毛球</span>
        </div>
        <div>
            <input type="checkbox">
            <span>足球</span>
        </div>
        <div>
            <input type="checkbox">
            <span>排球</span>
        </div>
    </div>


    <script>
         window.onload=function(){
            var CheckAll=document.getElementById('All');
            var UnCheck=document.getElementById('uncheck');
            var OtherCheck=document.getElementById('othercheck');
            var div=document.getElementById('content');
            var CheckBox=div.getElementsByTagName('input');
            CheckAll.onclick=function(){
                     for(i=0;i<CheckBox.length;i++){
                            CheckBox[i].checked=true;
                        };
                };
             UnCheck.onclick=function(){
                   for(i=0;i<CheckBox.length;i++){
                            CheckBox[i].checked=false;
                        };
                };
             othercheck.onclick=function(){
                    for(i=0;i<CheckBox.length;i++){
                           if(CheckBox[i].checked==true){
                                  CheckBox[i].checked=false;
                              }else{
                              CheckBox[i].checked=true
                                }
                        };
                };
         };
     </script>
</body>
</html>